<!DOCTYPE html>
<html>

<head>
    <title>二手网站</title>
    <meta charset="utf-8" />
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            text-decoration: none;
            list-style: none;
        }

        body {
            background-color: rgb(176, 168, 168);
        }

        .header {
            width: 100%;
            background: rgb(46, 44, 44);
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }


        .header_right {
            padding-left: 120px;
            justify-content: space-around;
        }

        .header_right span {
            color: white;
            width: 25px;
            height: 25px;

        }

        .logo_ {
            padding-right: 130px;
        }

        .logo {
            width: 90px;
            height: 90px;
        }

        input {
            width: 800px;
            height: 40px;
            border-radius: 15px;
            background-color: aliceblue;

        }

        .menu {
            background-color: #e2e2e2;
            display: flex;
            flex-direction: row;
            width: 92%;
            height: 350px;
            border: 1px solid white;
            text-align: center;
            margin: 10px auto 0px;
            border-radius: 15px;
        }

        .mainUl {
            list-style: none;
            width: 320px;
            height: auto;
            height: 335px;
            padding: 8px 0px;
            background-color: #f0f3ef;
            font-size: 16px;
            border-radius: 15px;
        }

        .mainUl li {
            width: 316px;
            padding-left: 2px;
            line-height: 28px;
        }

        .mainUl li:hover {
            background-color: #e2e2e2;
        }

        .mainUl li a:hover {
            cursor: pointer;
            color: #ff0000;
        }

        .dropdown {
            display: none;
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            width: 200px;
        }

        .dropdown a {
            display: block;
            padding: 5px 0;
            color: black;
            text-decoration: none;
        }

        .dropdown a:hover {
            color: #ff0000;
        }

        #main {
            width: 60px;
            background-color: white;
            position: fixed;
            right: 0px;
            bottom: 50%;
        }

        .item {
            width: 60px;
            height: 65px;
            border: 1px solid #efefef;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        #photo1 {
            width: 14px;
            height: 21px;
        }

        #photo2 {
            width: 22px;
            height: 18px;
        }

        #erweima {
            width: 100px;
            display: none;
            background-color: white;
            position: absolute;
            right: 60px;
            top: 0px;
        }

        #officialAccount {
            width: 100px;
            display: none;
            background-color: white;
            position: absolute;
            right: 60px;
            top: 67px;
        }

        #photo3 {
            width: 18px;
            height: 18px;
        }

        #photo4 {
            width: 18px;
            height: 20px;
        }

        #photo5 {
            width: 18px;
            height: 20px;
        }

        .pic {
            width: 70px;
            margin: 15px 15px 0px 15px;
        }

        .text {
            font-size: 12px;
            color: #363636;
            text-align: center;
            margin-bottom: 5px;
        }

        .bottom {
            width: 100%;
            height: 100px;
            background-color: black;
            position: absolute;
            bottom: 0px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .mini{
            widrth:800px;
            height:600px;
            background:white;
            border-radius: 15px;
            z-index: 999;

        }
    </style>
    <script type="text/javascript">
        function showDropdown(elementId) {
            document.getElementById("dropdown").style.display = "block";
        }

        function hideDropdown(elementId) {
            document.getElementById("dropdown").style.display = "none";
        }
        function showErweima() {
            document.getElementById("erweima").style.display = "block";
        }
        function closeErweima() {
            document.getElementById("erweima").style.display = "none";
        }
        function showWeixin() {
            document.getElementById("officialAccount").style.display = "block";
        }
        function closeWeixin() {
            document.getElementById("officialAccount").style.display = "none";
        }
    </script>
</head>

<body>
    <div class="header">
        <div class="logo_"><img src="./assets\logo.png" class="logo"></div>
        <div> <input type="text" name="resou" placeholder="搜你想搜的"></div>
        <div class="header_right">
            <span>登录</span>
            <span>订单</span>
        </div>
    </div>

    <div></div>
    <div class="menu">
        <ul class="mainUl">
            <li ><a>手机</a> /<a>运营商</a></li>
            <li><a>电脑</a> /<a>办公</a> /<a>工业品</a></li>
            <li><a>家居</a> /<a>家具</a> /<a>家装</a></li>
            <li><a>男装</a> /<a>女装</a> /<a>童装</a> </li>
            <li><a>美妆</a> /<a>个护清洁</a> /<a>宠物</a></li>
            <li><a>女鞋</a> /<a>箱包</a> /<a>钟表</a></li>
            <li><a>男鞋</a> /<a>运动</a> /<a>户外</a></li>
            <li><a>房产</a> /<a>汽车</a> /<a>汽车用品</a></li>
            <li><a>母婴</a> /<a>玩具乐器</a> /<a>特产</a></li>
            <li><a>食品</a> /<a>酒类</a> /<a>生鲜</a></li>
            <li><a>艺术</a> /<a>礼品鲜花</a> /<a>农资绿植</a></li>
            <li><a>医药保健</a> /<a>计生情趣</a></li>
        </ul>

    </div>
    <div class="mini">
        <div class="sort">
            <div></div>
        </div>
    </div>
    <div></div>
    <div></div>

    <div id="main">
        <div class="item" onmouseover="showErweima()" onmouseout="closeErweima()">
            <img id="photo1"
                src="https://img.alicdn.com/imgextra/i4/O1CN01lEPnjg1PfapaC1Pmh_!!6000000001868-2-tps-78-78.png">
            <div class="text">发闲置</div>
            <div id="erweima">
                <img class="pic" src="http://www.youyu001.com/res/htmlLX/icon2_1.png">
                <div class="text">发闲置功能待上线</div>
            </div>
        </div>
        <div class="item" onmouseover="showWeixin()" onmouseout="closeWeixin()">
            <img id="photo2"
                src="https://img.alicdn.com/imgextra/i4/O1CN012LgurL1IIVYdOXC3C_!!6000000000870-2-tps-78-78.png">
            <div class="text">APP</div>
            <div id="officialAccount">
                <img class="pic" src="http://www.youyu001.com/res/htmlLX/icon2_1.png">
                <div class="text">扫码下载APP</div>
            </div>
        </div>
        <div class="item" onmouseover="showWeixin()" onmouseout="closeWeixin()">
            <img id="photo3"
                src="https://img.alicdn.com/imgextra/i2/O1CN01O2kuWY1OUlrBZUndC_!!6000000001709-2-tps-78-78.png">
            <div class="text">消息</div>
        </div>
        <div class="item" onmouseover="showWeixin()" onmouseout="closeWeixin()">
            <img id="photo4"
                src="https://img.alicdn.com/imgextra/i1/O1CN01BoZf9m2940ejklcsZ_!!6000000008013-2-tps-78-78.png">
            <div class="text">反馈</div>
        </div>
        <div class="item" onmouseover="showWeixin()" onmouseout="closeWeixin()">
            <img id="photo5"
                src="https://img.alicdn.com/imgextra/i1/O1CN017iNVCM1XFxai5WDG6_!!6000000002895-2-tps-78-78.png">
        </div>
    </div>
    <div class="bottom">

    </div>
</body>

</html>